﻿@{
    ViewBag.Title = "ComboBox : Disable List Items";
}

<h2>ComboBox : Disable List Items</h2>

<h3>Sample</h3>

@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("combobox_onLoad"))
        .Render();
}
<br />
<button style="margin-top:10px;" onclick="disableComboBoxItems();">Disable List Items</button>

<script type="text/javascript">
    var categories = [
        { Value: 1, Text: 'Developer Tools' },
        { Value: 2, Text: 'Agile Project Management' },
        { Value: 3, Text: 'Software Testing Tools' },
        { Value: 4, Text: 'Software Testing Tools' },
        { Value: 5, Text: 'Web Content Management' },
        { Value: 6, Text: 'SharePoint' },
        { Value: 7, Text: 'Free Tools' },
        { Value: 8, Text: 'Unselectable' }
    ];

    combobox_onLoad = function (e) {
        var combobox = $('#combobox').data('tComboBox');
        combobox.dataBind(categories);

    }

    disableComboBoxItems = function () {
        var combobox = $('#combobox').data('tComboBox');

        combobox.disableListItems([{ value: 6 }, { text: 'Unselectable'}]);
    }

</script>